<template>
  <div class="content-find">
    <div class="find-title">
      <span>拍摄场地</span>
    </div>
    <div class="cdbox-box">
      <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="10"
        >
          <van-empty
            v-show="empty"
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="目前没有拍摄场地的信息哦"
          />
          <van-skeleton v-show="skeleton" v-for="(item,index) of 4" :key="index" title avatar :row="5" />
          <div class="box-msg" v-for="(item,index) of cdlist" :key="index" @click="gocdisd(item)">
            <div class="msg-img-box">
              <img :src="item.imgs[0]" alt="">
            </div>
            <div class="msg-text">
              <div class="text-theme">
                <span>{{ item.fieldname }}</span>
              </div>
              <div class="text-content">
                <span>{{ item.introduce }}</span>
              </div>
            </div>
            <div class="msg-cz">
              <div class="cz-le">
                <div class="le-icon">
                  <i class="iconfont icon-chengshi"></i>
                  <span>{{ item.fieldType }}</span>
                </div>
                <div class="le-icon">
                  <i class="iconfont icon-dizhi"></i>
                  <span>{{ item.fieldAdress }}</span>
                </div>
              </div>
              <div class="cz-rg">
                <div class="cz-box">
                  <span>浏览: {{ item.browse }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  name: "appfind",
  data(){
    return{
      cdlist: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      maxpage: null,
      empty: false,
      skeleton: true
    }
  },
  created() {
    this.findcdlist();
  },
  methods:{
    onLoad(){
      this.loading = true;
      if (this.page > this.maxpage) {
        this.loading = false;
        this.finished = true;
      }else {
        setTimeout(()=>{
          this.findcdlist()
          this.loading = false;
        },1000)
      }
    },
    onRefresh(){
      this.skeleton = true
      this.cdlist = []
      setTimeout(() => {
        this.page = 1
        this.findcdlist()
        this.refreshing = false;
        this.finished = false;
        this.skeleton = false;
      }, 1000);
    },
    async findcdlist(){
      try {
        const res = await this.$axios({
          url:'/blog/fieldfind',
          method:"post",
          data:{
            page: this.page,
          }
        })
        const {success, msg, data, length, maxpage} = res.data
        if (success){
          if(data.rows.length == 0 && this.page == 1){
            this.empty = true
            this.skeleton = false
          }
          if(data.rows.length != 0){
            this.skeleton = false;
          }
          data.rows.map(r=>{
            const year = new Date(r.fieldTime).getFullYear();
            const mouth = `${new Date(r.fieldTime).getMonth()+1}`.padStart(2, 0);
            const day = `${new Date(r.fieldTime).getDate()}`.padStart(2, 0);
            r.newaddTime = `${year}-${mouth}-${day}`
            r.imgs = []
            r.suitable = r.suitable.split(',')
            r.pictures.map(url=>{
              r.imgs.push(url.photourl)
            })
          })
          data.rows.forEach(r=>{
            this.cdlist.push(r)
          })
          this.page++;
          this.maxpage = maxpage
          console.info(data)
          console.info(maxpage)
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    gocdisd(item){
      this.$router.push({
        name: "cdisd",
        params: {
          field: item
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.content-find{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .find-title{
    width: 100%;
    height: vw(90);
    line-height: vw(90);
    background-color: #ffffff;
    text-align: center;
  }
  .cdbox-box{
    flex: 1;
    width: 100%;
    background-color: #ffffff;
    overflow-y: auto;
    .van-empty {
      height: 100%;
    }
    .box-msg{
      width: vw(690);
      margin: vw(10) auto;
      .msg-img-box{
        img{
          width: 100%;
          height: vw(400);
          object-fit: cover;
        }
      }
      .msg-text{
        margin-top: vw(20);
        .text-theme{
          font-size: vw(35);
          font-weight: bold;
        }
        .text-content{
          padding-top: vw(20);
          font-size: vw(25);
          -webkit-line-clamp: 2;
          letter-spacing:2px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          white-space: normal;
          color: #acacac;
        }
      }
      .msg-cz{
        display: flex;
        .cz-le{
          display: flex;
          align-items: center;
          .le-icon{
            font-size: vw(30);
            color: lightcoral;
            padding-right: vw(15);
            i{
              padding-right: vw(10);
            }
          }
        }
        .cz-rg{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          .cz-box{
            padding:vw(15);
            display: flex;
            align-items: center;
            span{
              margin-left: vw(10);
              font-size: vw(30);
              color: #a3a3a3;
            }
          }
        }
      }
    }
  }
}

</style>
